<template>
    <div class="row no-gutters">
        <div class="col-md-4">
            <section v-if="change_page">
                <div class="modal-content">
                    <div class="user">
                        <div class="formBx">
                            <form @submit.prevent="doLogin()">
                                <h2>登 录</h2>
                                <input type="text" name="uid" placeholder="Username" v-model="uid" autocomplete="off">
                                <input type="password" name="password" placeholder="Password" v-model="password" autocomplete="off">
                                <input type="submit" name="" value="Login">
                                <p @click="changePage">注册？</p>
                                <p v-if="response_massage">{{response_massage}}</p>
                            </form>
                        </div>
                    </div>
                </div>
            </section>
            <section v-if="!change_page">
                <div class="modal-content">
                    <div class="user">
                        <div class="formBx">
                            <form @submit.prevent="doRegister()">
                                <h2>注 册</h2>
                                <input type="text" name="" placeholder="账号" autocomplete="off" v-model="uid">
                                <input type="text" name="" placeholder="密码" autocomplete="off" v-model="password">
                                <input type="text" name="" placeholder="昵称" autocomplete="off"v-model="name">
                                <input type="submit" name="" value="Register">
                                <p @click="changePage">登录？</p>
                                <p v-if="response_massage">{{response_massage}}</p>
                            </form>
                        </div>
                    </div>
                </div>
            </section>
        </div>
        <div class="col-md-8 login_box">
            <img src="../assets/img/login_icon.png">
        </div>
    </div>
</template>

<script>
    import {requestB} from "../network/request";
    import axios from 'axios'//导入axios类
    export default {
        name: "Login",
        data() {
            return {
                uid: null,//用户登录账号
                password: null,//用户登录密码
                name: null,
                response_massage: null,//登录返回的数据
                change_page: true
            }
        },
        methods: {
            //驼峰命名: 动词+首字母大写
            //函数规范：函数名()+空格{}
            changePage() {
                this.change_page = ! this.change_page;
                this.response_massage = null;

            },
            doLogin() {
                if (this.uid == '' || this.password == '' || this.uid == null || this.password == null){//用户输入信息不完全
                    this.response_massage = "请填入完整的信息";
                }else {
                    requestB({
                        url: 'http://localhost:8080/web/login.action',
                        methods: 'GET',
                        params: {
                            uid: this.uid,
                            password: this.password
                        },
                    }).then(success => {
                        console.log(success.data.msg);//成功获取到数据200
                        this.response_massage = success.data.msg
                        if (success.data.code == 200){
                            this.$store.commit('setUser',success.data.data);//存入数据
                            this.$message({
                                message: '恭喜你登录成功！',
                                type: 'success'
                            });
                            $(".bs-example-modal-lg").modal('hide');
                            this.response_massage = null;//登录之前清除响应参数数据
                        }else {
                            console.log("账号或密码不匹配" + success.data.code);
                        }
                    }).catch(error => {
                        this.response_massage = success.data.msg
                        console.log("请求错误"+error);
                    })
                }
            },
            doRegister() {
                if (this.uid == '' || this.password == '' || this.uid == null || this.password == null){//用户输入信息不完全
                    this.response_massage = "请填入完整的信息";
                }else {
                    requestB({
                        url: 'http://localhost:8080/web/register.action',
                        methods: 'GET',
                        params: {
                            uid: this.uid,
                            name: this.name,
                            password: this.password
                        },
                    }).then(success => {
                        console.log(success.data.msg);//成功获取到数据200
                        this.response_massage = success.data.msg
                        if (success.data.code == 200){
                            this.$message({
                                message: '注册成功',
                                type: 'success'
                            });
                        }else {
                            console.log("账号或密码不匹配" + success.data.code);
                        }
                    }).catch(error => {
                        this.response_massage = '注册失败';
                        console.log("请求错误"+error);
                    })
                }
            }
        },
    }
</script>

<style scoped>
    /*登录弹框*/
    section{
        position: relative;
        display: flex;
        height: 450px;
        justify-content: center;
    }
    section .modal-content{
        position: relative;
        background: #fff;
        box-shadow: 5px 0px 50px rgba(0, 0, 0, 0.1);
    }
    section .modal-content .user .formBx{
        position: relative;
        margin: 0 auto;
        height: 100%;
        background: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 40px;
        transition: .5s;
    }
    section .modal-content .user .formBx form h2{
        font-size: 18px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 2px;
        text-align: center;
        width: 100%;
        margin-bottom: 10px;
        color: #555;
    }
    section .modal-content .user .formBx form input{
        position: relative;
        padding: 10px;
        display: block;
        background: #f5f5f5;
        color: #333;
        border: none;
        outline: none;
        box-shadow: none;
        margin: 20px 0;
        font-size: 14px;
        letter-spacing: 1px;
    }
    section .modal-content .user .formBx form input[type="submit"]{
        background: #677eff;
        color: #fff;
        cursor: pointer;
        font-size: 14px;
        font-weight: 500;
        letter-spacing: 1px;
        border-radius: 3px;
        transition: .5s;
    }
    section .modal-content .user .formBx form input[type="submit"]:hover {
        background-color: darkmagenta;
    }
    section .modal-content .user .formBx form{
        position: relative;
        margin-top: 20px;
        font-size: 12px;
        letter-spacing: 1px;
        color: #555;
        text-transform: uppercase;
        font-weight: 300;
    }
    @media screen and (max-width: 767px) {
        .login_box {
            display: none;
        }
    }
    @media (max-width: 991px){
        section .modal-content{
            max-width: 400px;
        }
        .login_box {
            line-height: 450px;
        }
        .login_box img{
            width: 100%;
        }
    }
</style>